<template>
  <div>
    <h1>简易记事本</h1>
    请输入笔记：<input type="text" v-model="newnote" />
    <button @click="addNote">添加</button>
    <ul>
      <li v-for="item in notelst" :key="item._id">
        <!-- <button @click="updataNote">完成</button> -->
        <label>{{ item.value }}</label>
        <button @click="remove(item._id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import axios from "axios";

getData();
async function getData() {
  const res = await axios({
    url: "https://q6zv39.laf.run/get_list",
    method: "GET",
  });
  notelst.value = res.data.list;
  console.log(notelst.value);
}
let notelst = ref([
  { _id: 1, value: "去散步", isCompleted: false },
  { _id: 2, value: "看书", isCompleted: false },
  { _id: 3, value: "打游戏", isCompleted: false },
  { _id: 4, value: "去上课", isCompleted: false },
]);

async function remove(id) {
  const res = await axios({
    url: "https://q6zv39.laf.run/del_todo",
    method: "POST",
    data: {
      id: id,
    },
    headers: {
      "Content-Type": "application/json",
    },
  });
  getData();
}
let newnote = ref("");
async function addNote() {
  const res = await axios({
    url: "https://q6zv39.laf.run/add-todo",
    method: "POST",
    data: {
      value: newnote.value,
      isCompleted: false,
    },
  });
  getData();
}
async function updateNote(id) {
  const res = await axios({
    url: "https://q6zv39.laf.run/update_todo",
    method: "POST",
    data: {
      id: id,
    },
  });
  getData();
}
</script>

<style scoped>
ul {
  text-align: left;
}
</style>
